<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选座_阿里迪里影院</title>
    <link href="images/favicon.ico" rel="shortcut icon" />

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/home.css">


    <style>
        /*  座位已选状态 */
        .optional {
            background: url(images/optional.png) no-repeat;
        }
        /* 座位已售状态 */
        .selected {
            background: url(images/selected.png) no-repeat;
        }
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 导航栏部分 -->
    <div class="head">
        <div class="head-inner">
            <div class="logo"><img src="images/logo.jpg">阿里迪里影院</div>

            <div class="nav">
                <ul class="navbar">
                    <li><a class="shouye" href="home_index.html">首页</a></li>
                    <li><a href="home_filmType.html">电影</a></li>
                    <li><a href="https://maoyan.com/cinemas">影院</a></li>
                    <li><a href="http://www.gewara.com/">演出</a></li>
                    <li><a href="https://maoyan.com/board">榜单</a></li>
                    <li><a href="https://maoyan.com/news">热点</a></li>
                    <li><a href="https://maoyan.com/edimall">商城</a></li>
                </ul>
            </div>

            <form>
                <input type="text" id="cond" required placeholder="找影片、 影剧" class="search">
                <input class="sub" type="button" title="点击可搜索你喜爱的电影哦。" id="commit">
            </form>

            <div class="user-info">
                <ul class="layui-nav layui-layout-right" style="background-color:#fff;">
                    <li class="layui-nav-item"><a href="javascript:;">
                            <img id="pic" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd id="h1" class="subMenu">
                                <a href="home_myOrder.html">我的订单</a>
                            </dd>
                            <dd id="h2" class="subMenu">
                                <a href="home_information.html">个人中心</a>
                            </dd>
                            <dd id="h3" class="subMenu">
                                <a id="logout">退出登录</a>
                            </dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>


    <!-- 选座部分 -->
    <div id="middle">

        <!-- 步骤栏 -->
        <div class="step">
            <div class="progress step-first done">
                <span class="step-num">1</span>
                <div class="bar"></div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="progress done">
                <span class="step-num">2</span>
                <div class="bar"></div>
                <span class="step-text">选择座位</span>
            </div>
            <div class="progress">
                <span class="step-num">3</span>
                <div class="bar"></div>
                <span class="step-text">3分钟内付款</span>
            </div>
            <div class="progress step-last">
                <span class="step-num">4</span>
                <div class="bar"></div>
                <span class="step-text">影院取票观影</span>
            </div>
        </div>

        <div class="seat-main" id="seat-choose">
            <div class="hall">
                <div class="hall-example">
                    <div class="seat-null">
                        <span>可选座位</span>
                    </div>
                    <div class="seat-selected">
                        <span>已售座位</span>
                    </div>
                    <div class="seat-optional">
                        <span>已选座位</span>
                    </div>
                    <div class="seat-both">
                        <span>情侣座位</span>
                    </div>
                </div>

                <div class="hall-main">
                    <div class="row-num">
                        <!-- 控制行数 -->
                        <span v-for="(s,i) in seats" class="row-num-id">{{i+1}}</span>

                    </div>
                    <div class="seats-container">
                        <div class="seats-tv">
                            <div class="seats-tv-text">银幕中央</div>
                            <div class="seats-tv-line"></div>
                        </div>
                        <div class="seats-wrapper">

                            <!-- 控制行 -->
                            <div class="row" v-for="(pai,i) in seats">
                                <!-- 控制列 -->
                                <span class="seat-id" v-for="(s,j) in pai" :key="j" :class="{optional:s.status==1,selected:s.status==2}"
                                @click="getSeat(s.seatRow,s.seatCol,s.seatId)">{{s.seatRow}}排{{s.seatCol}}座</span>

                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <div class="side">
                <div class="side-info">
                    <div class="side-info-picture">
                        <img v-bind:src="'../images/'+ticket.filmPicture">
                    </div>

                    <div class="side-info-content">
                        <p>{{ticket.filmName}}</p>
                        <div>
                            类型：<span>{{ticket.filmType}}</span>
                        </div>
                        <div>
                            时长：<span>{{ticket.filmLong}}分钟</span>
                        </div>
                    </div>
                </div>

                <div class="side-show">
                    <div>
                        影院：<span>阿里迪里影院</span>
                    </div>
                    <div>
                        影厅：<span>{{ticket.hallName}}</span>
                    </div>
                    <div>
                        版本：<span>{{ticket.filmLanguage}}{{ticket.hallType}}</span>
                    </div>
                    <div>
                        场次：<span style="color: #f03d37;">{{ticket.showDate}} {{ticket.startTime}}</span>
                    </div>
                    <div>
                        票价：<span>￥{{ticket.price}}/张</span>
                    </div>
                </div>

                <div class="side-ticket">
                    <div class="no-ticket" v-if="place==[] || place.length==0">
                        <p>座位：一次最多选六个座位</p>
                        <p>
                            请<span>点击左侧</span>座位图选择座位
                        </p>
                    </div>
                    <div class="has-ticket" v-else>
                        <span class="text">座位：</span>
                        <div class="has-ticket-content">
                    
                            <span v-for="(t,i) in place">{{t}}</span>
                        </div>
                    </div>
                    <div class="ticket-price">
                        总价：<span>￥</span><span>{{place.length*ticket.price}}</span>
                    </div>
                </div>
                <div class="side-confirm">
                    <div class="phone" v-if="user!=''">
                        手机号：<span>{{user.phone}}</span>
                    </div>
                    <div class="side-confirm-btn" v-bind:class="{disable:place.length==0}" @click="buy">确认选座</div>
                </div>
            </div>

            <!-- 购票数上限提示框 -->
            <div class="hide-prompt" style="display: none;" id="tip1">
                <div class="hide-prompt-model">
                    <span></span>
                    <p>一次最多购买六张票</p>
                    <div class="ok-btn" style="width: 260px;" @click="cls">我知道了</div>
                </div>
            </div>

            <!-- 未登录提示框 -->
            <div class="hide-prompt" style="display: none;" id="tip2">
                <div class="hide-prompt-model">
                    <span></span>
                    <p>您还未登录，请登录再购票哦！</p>
                    <div class="ok-btn" @click="log">立即登录</div>
                    <div class="no-btn" @click="no">取消</div>
                </div>
            </div>          
        </div>
    </div>


    <!--底部版块部分-->
    <div class="footer">
        <p>
            关于阿里迪里：
            <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="#">投资者关系</a>&nbsp;&nbsp;&nbsp;&nbsp;
            友情链接：
            <a href="https://maoyan.com/films">猫眼电影</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/cinemas">猫眼影院</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/edimall">猫眼商城</a>
        </p>

        <p>
            商务合作邮箱：alidli@qq.com &nbsp;&nbsp;|&nbsp;&nbsp;客服电话：10104422
        </p>

        <p>
            Copyright &copy; 2020 - {{nowYear}} 版权所有| by<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
        </p>

        <p>
            &copy;2020 阿里迪里影视 alidli.com
        </p>

        <div class="footer-end">
            <img src="images/bankuai1.png"><img src="images/bankuai2.png"><img src="images/bankuai3.png">
        </div>
    </div>


    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/home-seatChoose.js"></script>
    <script src="js/home-same.js"></script>
</body>
</html>